<template>
  <div class="mock-content">
    <Split v-model="split">
      <Tabs type="card" slot="left" @on-click="tabChange" v-model="curTabName">
        <div slot="extra">
          <Button type="primary" @click="makeRule">保存规则</Button>
          <Button type="primary" @click="makeList">Mock</Button>
        </div>
        <TabPane label="设置" name="设置">
          <div class="con">
            <Table :columns="setColumns" :data="rules" border>
              <template slot="rule" slot-scope="{row,index}">
                <!-- <Poptip trigger="click" content="content" transfer placement="right-start">
                  <Input v-model="row.rule" placeholder="生成规则"></Input>
                  <div slot="content">
                    <ul class="ruleItems">
                      <li v-for="(li,i) in items" @click="setRule(index,row,li)">{{li}}</li>
                    </ul>
                  </div>
                </Poptip>-->
                <AutoComplete
                  v-model="row.rule"
                  placeholder="mock规则"
                  @on-change="setRow(index,row)"
                  transfer
                  style="width:300px"
                >
                 <!-- <Option v-for="(li,i) in mockItems" :value="li.code" :key="i">{{li.name}}<span class="fr">{{fr.code}}</span></Option> -->
                 <Option v-for="(li,i) in mockItems" :value="li.code" :key="i">{{li.name}}<span class="fr">{{li.code}}</span></Option>
                </AutoComplete>
              </template>
            </Table>
          </div>
        </TabPane>
        <TabPane label="Json" name="Json">
          <Input v-model="rulesContent" placeholder="mock规则" type="textarea" :rows="20"></Input>
        </TabPane>
      </Tabs>
      <Tabs type="card" slot="right">
        <TabPane label="数据">
          <Table :columns="entityColumns" :data="list"></Table>
        </TabPane>
        <TabPane label="Json">
          <Input v-model="listData" placeholder="mock规则" type="textarea" :rows="20"></Input>
        </TabPane>
      </Tabs>
    </Split>
  </div>
</template>   
<script>
import Api from "./api";
import Mock from "mockjs";
export default {
  name: "Edit",
  data() {
    return {
      disabled: false,
      mode: true,
      split: 0.5,
      entity: {},
      row: {
        columnDescription: "",
        dbColumnName: "",
        dataType: "varchar",
        code: "",
        isNullable: false,
        isKey: false,
        unit: "",
        length: 0,
        decimalDigits: 0,
        link: 0,
        defaultValue: "",
        control: 0,
      },
      list: [],
      listData: "",
      rules: [],
      items: [
        "@boolean",
        "@boolean(1, 9, true)",
        "@natural",
        "@natural(10000)",
        "@natural(60, 100)",
        "@integer",
        "@integer(10000)",
        "@integer(60, 100)",
        "@float",
        "@float(0)",
        "@float(60, 100)",
        "@float(60, 100, 3)",
        "@float(60, 100, 3, 5)",
        "@character",
        '@character("lower")',
        '@character("upper")',
        '@character("number")',
        '@character("symbol")',
        '@character("aeiou")',
        "@string",
        "@string(5)",
        '@string("lower", 5)',
        '@string("upper", 5)',
        '@string("number", 5)',
        '@string("symbol", 5)',
        '@string("aeiou", 5)',
        "@string(7, 10)",
        '@string("lower", 1, 3)',
        '@string("upper", 1, 3)',
        '@string("number", 1, 3)',
        '@string("symbol", 1, 3)',
        '@string("aeiou", 1, 3)',
        "@range(10)",
        "@range(3, 7)",
        "@range(1, 10, 2)",
        "@range(1, 10, 3)",
        "@date",
        '@date("yyyy-MM-dd")',
        '@date("yy-MM-dd")',
        '@date("y-MM-dd")',
        '@date("y-M-d")',
        "@time",
        '@time("A HH:mm:ss")',
        '@time("a HH:mm:ss")',
        '@time("HH:mm:ss")',
        '@time("H:m:s")',
        "@datetime",
        '@datetime("yyyy-MM-dd A HH:mm:ss")',
        '@datetime("yy-MM-dd a HH:mm:ss")',
        '@datetime("y-MM-dd HH:mm:ss")',
        '@datetime("y-M-d H:m:s")',
        "@now",
        "@color",
        "@hex",
        "@rgb",
        "@rgba",
        "@hsl",
        "@paragraph",
        "@paragraph(2)",
        "@paragraph(1, 3)",
        "@sentence",
        "@sentence(5)",
        "@sentence(3, 5)",
        "@word",
        "@word(5)",
        "@word(3, 5)",
        "@title",
        "@title(5)",
        "@title(3, 5)",
        "@cparagraph",
        "@cparagraph(2)",
        "@cparagraph(1, 3)",
        "@csentence",
        "@csentence(5)",
        "@csentence(3, 5)",
        "@cword",
        '@cword("零一二三四五六七八九十")',
        "@cword(3)",
        '@cword("零一二三四五六七八九十", 3)',
        "@cword(3, 5)",
        '@cword("零一二三四五六七八九十", 5, 7)',
        "@ctitle",
        "@ctitle(5)",
        "@ctitle(3, 5)",
        "@first",
        "@last",
        "@name",
        "@name(true)",
        "@cfirst",
        "@clast",
        "@cname",
        "@url",
        "@domain",
        "@protocol",
        "@tld",
        "@email",
        "@ip",
        "@region",
        "@province",
        "@city",
        "@city(true)",
        "@county",
        "@county(true)",
        "@zip",
        '@capitalize("hello")',
        '@upper("hello")',
        '@lower("HELLO")',
        '@pick(["a", "e", "i", "o", "u"])',
        '@shuffle(["a", "e", "i", "o", "u"])',
        "@guid",
        "@id",
        "@increment",
        "@increment(100)",
        "@increment(1000)",
      ],
      mockItems:[],
      setColumns: [
        { title: "名称", key: "columnDescription", width: 150 },
        { title: "字段", key: "dbColumnName", width: 100 },
        { title: "类型", key: "dataType", width: 150 },
        { title: "长度", key: "length", width: 150 },
        { title: "规则", key: "rule", slot: "rule" },
      ],
      mockRules: [{ id: 0, label: "文本", rule: `` }],
      rulesContent: "",
      entityColumns: [],
      curTabName: "设置",
    };
  },
  props: {
    eid: String,
  },
  created() {
    if (this.eid) {
      this.load(this.eid);
    }
    this.mockItems=this.$store.getters.dictionaryByKey("Mock");
    console.warn("mock",this.mockItems)
  },
  methods: {
    load(v) {

      let r=[
        "@ctitle",
        "@cparagraph",
        "@integer(150, 210)",
        "@datetime",
        "@integer(0,5)",
        "@csentence(20,100)",
        "@dataImage('100x20')",
        "@guid",
        "@float(45,150,2)",
        "@cname",
        "@email",
        "@time",
        "@color",
        "@hex",
        "@rgba",
        "/1[3-8]\d{9}/",
        "@url",
        "@zip",
        "@range(0,9,3)"
      ]
      Api.get({ id: v }).then((p) => {
        if (p.result.tags) {
          p.result.tags = p.result.tags.split(",");
        } else {
          p.result.tags = [];
        }
        this.entity = p.result;
        let rules = p.result.columns;
        let fields = [];
       //let  arrs= 
       rules.map((u) => {
          u.rule = "234";
          if(u.dataType=="varchar"){
            u.rule=r[0]
          }else if(u.dataType=="datetime"){
            u.rule=r[3]
          }else if(u.dataType=="smallint"){
            u.rule=r[4]
          }else if(u.dataType=="int"){
            u.rule=r[2]
          }else if(u.dataType=="text"){
            u.rule=r[5]
          }else if(u.dataType=="double"){
            u.rule=r[8]
          }
          let field = {
            key: u.dbColumnName,
            title: u.columnDescription,
            rule:u.rule
          };
          if(u.length>200||u.dataType=="text"){
            field.tooltip=true
          }
          fields.push(field);
         // return u;
        });
        console.warn(rules)
        this.rules = rules;
        this.entityColumns = fields;
        // this.entity.columns = [];
      });
    },
    getRule(f) {
      var type = f.dataType;
      if (type) {
      }
    },
    setRow(index, row) {
      this.$set(this.rules, index, row);
    },
    makeRule() {
      let obj = {};
      this.rules.map((u) => {
        if (u.rule[0] !='|') {
          obj[u.dbColumnName] = u.rule;
        } else {
          let arrs = u.rule.split(":");
          obj[u.dbColumnName + arrs[0]] = arrs[1];
        }
      });
      this.rulesContent =JSON.stringify({ "data|10": [obj] });
      this.curTabName="Json";
    },
    makeList() {
      let rule = JSON.parse(this.rulesContent);
      let data = Mock.mock(rule);

      console.warn(data);
      this.list = data.data;
      this.listData = JSON.stringify(data.data);
    },
    tabChange(name) {
      this.curTabName = name;
    },
    l(key) {
      /**
      var conditions = [
        { fieldName: "a1.name", fieldValue: "1" },
        { fieldName: "a1.name2", fieldValue: "t1.c3" },
        {
          fieldName: "a1.name2",
          fieldValue: "567",
          coditionalType: "LessThan",
        },
        {
          And: {
            fieldName: "a1.name2",
            fieldValue: "567",
            coditionalType: "LessThan",
          },
        },
        {
          Or: {
            fieldName: "a1.name2",
            fieldValue: "567",
            coditionalType: "LessThan",
          },
        },
        {
          Or: [{
            fieldName: "a1.name2",
            fieldValue: "567",
            coditionalType: "LessThan",
          },{And:{
            fieldName: "a1.name2",
            fieldValue: "567",
            coditionalType: "LessThan",
          }}],
        },
      ]; */
      key = "DbEntityDefined" + "." + key;
      return this.$t(key);
    },
  },
  computed: {
    curColumns() {
      if (this.mode) return this.columns;
      return this.columns.filter((u) => {
        return !u.hide && u.hide != true;
      });
    },
  },
  watch: {
    eid(v) {
      if (v) {
        this.load(v);
      }
    },
  },
};
</script>
<style lang="less">
.mock-content {
  height: calc(100vh - 80px);
}
.ruleItems {
  width: 500px;
  list-style: none;
  max-height: 300px;
  overflow-y: auto;
  li {
    display: block;
    width: 40%;
    // border: 1px solid #eee;
    // margin: 2px;
    // padding: 5px;
    float: left;
  }
  li:hover {
    background: olivedrab;
  }
}
</style>